<template>
  <div class="zzjm">
    <el-card>
      <div slot="header" class="card-header">
        <span>{{ this.$route.meta.title }}</span>
      </div>
      <el-card shadow="never">
        <el-table :data="tableData" border style="width: 100%;">
          <el-table-column prop="columnA" label="模型名称"> </el-table-column>
          <el-table-column prop="columnB" label="模型参数1"> </el-table-column>
          <el-table-column prop="columnC" label="模型参数2"> </el-table-column>
          <el-table-column prop="columnD" label="模型参数3"> </el-table-column>
          <el-table-column prop="columnE" label="点击查看剩余参数">
            <template slot-scope="scope">
              <span style="cursor:pointer">{{ scope.row.columnE }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-button
          type="primary"
          style="float:right;margin:20px"
          @click="dialogVisible = true"
          >编辑模型</el-button
        >
      </el-card>
      <el-card shadow="never" style="marginTop:20px">
        <el-form label-width="100px" label-position="right" :model="formData">
          <el-form-item label="选择模型">
            <el-checkbox-group v-model="checkList" :max="1">
              <el-checkbox label="欠费管理模型"></el-checkbox>
              <el-checkbox label="账本管理模型"></el-checkbox>
              <el-checkbox label="营销资源管理"></el-checkbox>
              <el-checkbox label="宽带管理模型"></el-checkbox>
              <el-checkbox label="物联网管理模型"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="选择参数">
            <el-select v-model="formData.selectA">
              <el-option label="总消费额" value="总消费额"> </el-option>
              <el-option label="信誉额度" value="信誉额度"> </el-option>
              <el-option label="在网年限" value="在网年限"> </el-option>
            </el-select>
            <el-button
              size="small"
              type="primary"
              style="marginLeft:20px"
              @click="
                handleClickA()
                $message({
                  showClose: true,
                  message: '已选择参数',
                  type: 'success'
                })
              "
              >确定选择参数</el-button
            >
            <el-form-item>
              <el-tag
                class="tags"
                v-for="tag in tags"
                :key="tag.name"
                closable
                :type="tag.type"
                @close="handleClose(tag)"
              >
                {{ tag.name }}
              </el-tag>
            </el-form-item>
          </el-form-item>
          <el-form-item label="添加参数">
            <el-input
              placeholder="请输入要添加的参数名称"
              style="width:200px"
              v-model="val"
            ></el-input>
            <el-button
              size="small"
              type="primary"
              style="marginLeft:20px"
              @click="
                handleClickB()
                $message({
                  showClose: true,
                  message: '已添加参数',
                  type: 'success'
                })
              "
              >确定添加参数</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-tag
              class="tags"
              v-for="tag in tagsB"
              :key="tag.name"
              closable
              :type="tag.type"
              @close="handleCloseA(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </el-form-item>
          <el-form-item label="模型名称">
            <el-input
              placeholder="请输入模型名称"
              style="width:200px"
              v-model="valA"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择算法">
            <el-select v-model="formData.selectB">
              <el-option label="数据关联法" value="数据关联法"> </el-option>
              <el-option label="数据选取法" value="数据选取法"> </el-option>
              <el-option label="数据合并法" value="数据合并法"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input style="width:500px">
              <template slot="prepend">SELECT * FROM</template>
            </el-input>
          </el-form-item>
          <el-button
            type="primary"
            style="float:right;margin:20px"
            @click="
              handleAdd()
              $message({
                showClose: true,
                message: '模型已生成，模型加入模型库',
                type: 'success'
              })
            "
            >生成模型</el-button
          >
        </el-form>
      </el-card>
    </el-card>

    <el-dialog title="编辑模型" :visible.sync="dialogVisible" width="60%">
      <el-table :data="tableDataA" border style="width: 100%">
        <el-table-column prop="columnA" label="模型名称"> </el-table-column>
        <el-table-column prop="columnB" label="模型参数量"> </el-table-column>
        <el-table-column prop="columnC" label="创建时间"> </el-table-column>
        <el-table-column prop="columnE" label="操作">
          <template>
            <el-button type="primary" size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tags: [],
      tagsB: [],
      val: '',
      valA: '',
      formData: {
        selectA: '总消费额',
        selectB: '数据关联法'
      },
      checkList: [],
      tableData: [
        {
          columnA: '2020北京账本管理模型',
          columnB: '总用户量',
          columnC: '套餐类型',
          columnD: '使用收费流量',
          columnE: '点击查看剩余8参数'
        },
        {
          columnA: '8月欠费管理模型',
          columnB: '套餐类型',
          columnC: '欠费总额',
          columnD: '用户所在地区',
          columnE: '点击查看剩余3 参数'
        },
        {
          columnA: '8月新增宽带统计模型',
          columnB: '用户名称',
          columnC: '宽带带宽',
          columnD: '用户总数量',
          columnE: '点击查看剩余6参数'
        }
      ],
      tableDataA: [
        {
          columnA: '2020北京账本管理模型',
          columnB: '11',
          columnC: '2020.1'
        },
        {
          columnA: '8月欠费管理模型',
          columnB: '6',
          columnC: '2020.1'
        },
        {
          columnA: '8月新增宽带统计模型',
          columnB: '9',
          columnC: '2020.3'
        }
      ]
    }
  },

  methods: {
    handleClickA() {
      this.tags.push({ name: this.formData.selectA, type: 'success' })
    },
    handleClickB() {
      this.tagsB.push({ name: this.val, type: 'success' })
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
    },
    handleCloseA(tag) {
      this.tagsB.splice(this.tagsB.indexOf(tag), 1)
    },
    handleAdd() {
      this.tableData.push({
        columnA: this.valA,
        columnB: this.tags[0].name,
        columnC: this.tagsB[0].name,
        columnD: this.tags[1].name,
        columnE: '点击查看剩余参数'
      })
      this.tableDataA.push({
        columnA: this.valA,
        columnB: this.tags.length + this.tagsB.length,
        columnC: '2020.11'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tags {
  display: inline-block;
  margin: 8px;
}
/deep/.el-form-item {
  margin-bottom: 0 !important;
  margin-top: 10px;
}
</style>
